<template>
<ScrollEl 
    class="gas-view-container">
    <div class="top-container">
        <UploadReport
            class="upload-report"
            @onUploadSuccess="onUploadSuccess">
        </UploadReport>
        <ChangeReport
            ref="ChangeReport"
            :reportType="2"
            @onChange="data=>{
                queryParams = data;
            }">
        </ChangeReport>
    </div>
    <!-- <Gas_Zt
        :fontColor="fontColor"
        :borderColor="borderColor"
        :chartBorderColor="chartBorderColor"
        :currentReport="currentReport">
    </Gas_Zt>
    <Gas_GZXS
        :fontColor="fontColor"
        :borderColor="borderColor"
        :chartBorderColor="chartBorderColor"
        :currentReport="currentReport">
    </Gas_GZXS>
    <Gas_YW
        :fontColor="fontColor"
        :borderColor="borderColor"
        :chartBorderColor="chartBorderColor"
        :currentReport="currentReport">
    </Gas_YW> -->
    <Isotope_C
        :fontColor="fontColor"
        :borderColor="borderColor"
        :chartBorderColor="chartBorderColor"
        :currentReport="currentReport"
        :reports="queryParams.reports || []"
        :areas="queryParams.areas || []"
        :horizons="queryParams.horizons || []">
    </Isotope_C>
    <Isotope_H
        :fontColor="fontColor"
        :borderColor="borderColor"
        :chartBorderColor="chartBorderColor"
        :currentReport="currentReport"
        :reports="queryParams.reports || []"
        :areas="queryParams.areas || []"
        :horizons="queryParams.horizons || []">
    </Isotope_H>
    <!-- <Isotope_Gas
        :fontColor="fontColor"
        :borderColor="borderColor"
        :chartBorderColor="chartBorderColor"
        :currentReport="currentReport">
    </Isotope_Gas> -->
    <!-- <Relation_Zt
        :fontColor="fontColor"
        :borderColor="borderColor"
        :chartBorderColor="chartBorderColor"
        :currentReport="currentReport">
    </Relation_Zt> -->
    <Relation_HC
        :fontColor="fontColor"
        :borderColor="borderColor"
        :chartBorderColor="chartBorderColor"
        :currentReport="currentReport"
        :reports="queryParams.reports || []"
        :areas="queryParams.areas || []"
        :horizons="queryParams.horizons || []">
    </Relation_HC>
    <!-- <Relation_JWT
        :fontColor="fontColor"
        :borderColor="borderColor"
        :chartBorderColor="chartBorderColor"
        :currentReport="currentReport">
    </Relation_JWT> -->
</ScrollEl>
</template>
<script>
/*
 地层水判识页面
 */
import ScrollEl from "@/components/ScrollEl";
import UploadReport from "@/components/UploadReport";
import ChangeReport from "@/components/ChangeReport";
import Isotope_C from './components/Isotope_C';
import Isotope_H from './components/Isotope_H';
// import Isotope_Gas from './components/Isotope_Gas';
// import Relation_Zt from './components/Relation_Zt';
import Relation_HC from './components/Relation_HC';
// import Relation_JWT from './components/Relation_JWT';
// import Gas_Zt from './components/Gas_Zt';
// import Gas_YW from './components/Gas_YW';
// import Gas_GZXS from './components/Gas_GZXS';
export default {
    name:'Gas',
    components:{
        ScrollEl,
        UploadReport,ChangeReport,
        // Gas_YW,Gas_GZXS,
        Isotope_C,Isotope_H,
        // Gas_Zt,
        // Isotope_Gas,
        // Relation_Zt,
        Relation_HC,
        // Relation_JWT,
    },
    data() {
        return {
            currentReport:{},  //当前选择展示中的报告
            queryParams:{},
            fontColor:'',
            borderColor:'',
            chartBorderColor:'',
        };
    },
    mounted(){
        this.fontColor = getComputedStyle(document.documentElement).getPropertyValue('--font-color');
        this.borderColor = getComputedStyle(document.documentElement).getPropertyValue('--border-color');
        this.chartBorderColor = getComputedStyle(document.documentElement).getPropertyValue('--border-color-chart');
    },
    methods:{
        onUploadSuccess(reportData){  //上传成功后重新获取数据
            console.log(reportData);
            this.$refs.ChangeReport.initData();
        },
    },
};
</script>
<style scoped lang="scss">
.gas-view-container{
    width: 100%;
    height: fit-content;
    max-height: 100%;
    box-sizing: border-box;
    display: grid;
    grid-gap: 1rem;
    /deep/input{
        background-color: rgba(255, 255, 255, 0.38);
        border-color: rgba(255, 255, 255, 0.38);
        color: white;
    }
    /deep/table{
        background: linear-gradient(180deg, #031F37 0%, #03316C 100%);
        box-shadow: inset 0px 0px 15px #1b60cc;
    }
    >.top-container{
        width: 100%;
        height: fit-content;
        margin: 0 auto;
        text-align: left;
        color: var(--font-color);
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1px;
        align-items: center;
        border-radius: var(--my-border-radius);
        border: 1px solid var(--border-color);
        box-sizing: border-box;
        padding: 1rem; 
        grid-template-areas: 'one two' 'three three';
        position: sticky;
        top: 0;
        background-color: var(--bg-color);
        z-index: 999;
        >.upload-report{
            height: 40px;
        }
    }
}
</style>
